//创建食物对象
class Food {
    constructor(x, y, width, height, bg) {
        this.x = x || 0;
        this.y = y || 0;
        this.width = width || 20;
        this.height = height || 20;
        this.bg = bg || `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
        this.div = null
    }
    //添加食物初始化方法init， 将init绑定在原型上
    init(scope) {
        remove(foodArr)
        //创建食物
        this.div = document.createElement("div");
        //追加
        scope.append(this.div)
        //设置食物的基本样式
        this.div.style.width = this.width + 'px'
        this.div.style.height = this.height + 'px'
        this.div.style.backgroundColor = this.bg 
        this.div.style.position = "absolute"
        this.update()
        foodArr.push(this.div)
    }
    update() {
        //设置食物的随机位置
        this.x = parseInt(Math.random() * (scope.offsetWidth / this.width)) * this.width
        this.y = parseInt(Math.random() * (scope.offsetHeight / this.height)) * this.height
        this.div.style.left = this.x + 'px';
        this.div.style.top = this.y + 'px';
        //随机变化食物颜色
        this.div.style.backgroundColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
    }
}